<script setup lang="ts">
  import { Icon } from '@iconify/vue';
  import { computed } from 'vue';

  const props = defineProps({
    // icon name
    icon: {
      type: String,
      required: true,
    },
    // icon color
    color: {
      type: String,
      default: '',
    },
    // icon size
    size: {
      type: Number,
      default: 16,
    },
    hoverColor: {
      type: String,
      default: '',
    },
  });

  const isLocal = computed(() => props.icon?.startsWith('icon'));

  const getIconifyStyle = computed(() => {
    const { color, size } = props;
    return {
      fontSize: `${size}px`,
      color,
    };
  });
</script>

<template>
  <component :is="icon" v-if="isLocal" :size="props.size"></component>
  <Icon v-else :icon="icon as string" :style="getIconifyStyle" />
</template>

<style lang="less" scoped>
  .iconify {
    &:hover {
      :deep(svg) {
        // stylelint-disable-next-line
        color: v-bind(hoverColor) !important;
      }
    }
  }
</style>
